<template>
  <div class="feedback-tool">
    <h2>反馈建议</h2>
    <p>请在下方输入您的建议或反馈：</p>
    <textarea v-model="feedback" placeholder="请输入您的反馈或建议..." rows="6"></textarea>
    <button @click="submitFeedback">提交反馈</button>
    <p v-if="message" class="message">{{ message }}</p>

    <div v-if="feedbackList.length > 0" class="feedback-list">
      <h3>已提交的反馈建议：</h3>
      <ul>
        <li v-for="(item, index) in feedbackList" :key="index">
          <p>{{ item.content }}</p>
          <small>{{ item.timestamp }}</small>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "FeedbackTool",
  data() {
    return {
      feedback: "",
      message: "",
      feedbackList: []
    };
  },
  methods: {
    async submitFeedback() {
      if (this.feedback.trim() === "") {
        this.message = "反馈内容不能为空！";
        return;
      }
      try {
        // 提交反馈到服务端，接口地址请根据实际情况修改
        await axios.post('/api/feedback', {
          content: this.feedback
        });
        this.message = "感谢您的反馈，我们会认真考虑您的建议。";
        this.feedback = "";
        // 重新获取反馈列表
        this.fetchFeedbackList();
      } catch (error) {
        this.message = "提交反馈时发生错误：" + error.message;
      }
    },
    async fetchFeedbackList() {
      try {
        const response = await axios.get('/api/feedback');
        // 假定返回结果为反馈对象数组，每个对象包含 content 与 timestamp 字段
        this.feedbackList = response.data;
      } catch (error) {
        console.error("获取反馈列表失败：", error);
      }
    }
  },
  mounted() {
    // 组件加载时获取反馈列表
    this.fetchFeedbackList();
  }
};
</script>

<style scoped>
.feedback-tool {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #2980b9;
}
.message {
  margin-top: 10px;
  font-weight: bold;
  color: green;
}
.feedback-list {
  margin-top: 20px;
  text-align: left;
}
.feedback-list ul {
  list-style: none;
  padding: 0;
}
.feedback-list li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.feedback-list li p {
  margin: 0;
}
.feedback-list small {
  color: #666;
}
</style> 